<template>
    <div class='main df'>

        <div class="main-left">
            <div class="message d-f">
                <div class="f1" style="margin: 20px 25px; box-sizing: border-box;position: relative;" @click="to">
                    <p>重要信息提示</p>
                    <p>20</p>
                    <div class="warn" v-show="remind">{{remind}}</div>
                </div>
                <div class="f1" style="margin: 20px 25px; box-sizing: border-box">
                    <p>重要信息提示</p>
                    <p>20</p>
                </div>
                <div class="f1" style="margin: 20px 25px; box-sizing: border-box">
                    <p>重要信息提示</p>
                    <p>20</p>
                </div>
                <div class="f1" style="margin: 20px 25px; box-sizing: border-box">
                    <p>重要信息提示</p>
                    <p>20</p>
                </div>
            </div>
            <!-- 大屏 -->
            <div class="big-screen">
                <ul class="screen-tab df">
                    <li v-for="(item, index) in screen_tab" :key="index">
                        <span :class="index == tab_line ? 'tab-line' : ''" @click="screen_tab_click(index)">{{ item.name
                        }}</span>
                    </li>
                </ul>

                <div class="bottom df">
                    <!-- 大屏左侧 -->
                    <div class="screen-left df fd-c">
                        <div class="one" style="height: 55% !important;">
                            <homeChart1></homeChart1>
                        </div>
                        <div class="two" style="height: 45px;">
                            <homeChart2></homeChart2>
                        </div>
                    </div>

                    <!-- 大屏右侧 -->
                    <div class="screen-right df fd-c">
                        <div class="one" id="container"></div>
                        <div id="container1" class="two"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-right">
            <!-- <Calendar></Calendar> -->
            <Rtheade></Rtheade>
        </div>
    </div>
</template>

<script>
import Rtheade from "./rtheade.vue";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);
import Highcharts3D from "highcharts/highcharts-3d";
Highcharts3D(Highcharts);
import homeChart1 from "./homeChart1.vue";
import homeChart2 from "./homeChart2.vue";
export default {

    name: '',
    components: { homeChart2, homeChart1, Rtheade },
    data() {
        return {
            remind:0,
            screen_tab: [
                {
                    name: "主要指标",
                },
                {
                    name: "盈利能力",
                },
                {
                    name: "成长能力",
                },
                {
                    name: "利润表",
                },
                {
                    name: "运营能力",
                },
                {
                    name: "运营能力",
                },
            ],
            tab_line: 0, //大屏tab的下划线
        }
    },
    created() { },
    mounted() {
        this.getInfo(); //右上饼图
        this.getInfo1(); //右下蜘蛛图
    },
    methods: {
        to(){
            this.$router.push('/important')
        },
        //大屏tab切换
        screen_tab_click(index) {
            this.tab_line = index;
        },
        //获取右侧饼图
        getInfo() {
            var chart = Highcharts.chart(
                "container",
                {
                    credits: {
                        enabled: false, // 禁用版权信息
                    },
                    chart: {
                        spacing: [40, 0, 40, 0],
                        backgroundColor: "",
                    },
                    title: {
                        floating: true,
                        text: "主要指标",
                        style: {
                            fontSize: 12,
                            color: "#FFF",
                        },
                    },
                    tooltip: {
                        pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: "pointer",
                            dataLabels: {
                                enabled: true,
                                format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                                style: {
                                    color:
                                        (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                                        "black",
                                },
                            },
                            point: {
                                events: {
                                    mouseOver: function (e) {
                                        // 鼠标滑过时动态更新标题
                                        // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                                        chart.setTitle({
                                            text: e.target.name + "\t" + e.target.y + " %",
                                        });
                                    },
                                    //,
                                    // click: function(e) { // 同样的可以在点击事件里处理
                                    //     chart.setTitle({
                                    //         text: e.point.name+ '\t'+ e.point.y + ' %'
                                    //     });
                                    // }
                                },
                            },
                        },
                    },
                    series: [
                        {
                            type: "pie",
                            innerSize: "80%",
                            name: "市场份额",
                            data: [
                                { name: "Firefox", y: 45.0, url: "http://bbs.hcharts.cn" },
                                ["IE", 26.8],
                                {
                                    name: "Chrome",
                                    y: 12.8,
                                    sliced: true,
                                    selected: true,
                                    // url: 'http://www.hcharts.cn'
                                },
                                ["Safari", 8.5],
                                ["Opera", 6.2],
                                ["其他", 0.7],
                            ],
                        },
                    ],
                },
                function (c) {
                    // 图表初始化完毕后的会掉函数
                    // 环形图圆心
                    var centerY = c.series[0].center[1],
                        titleHeight = parseInt(c.title.styles.fontSize);
                    // 动态设置标题位置
                    c.setTitle({
                        y: centerY + titleHeight / 2,
                    });
                }
            );
        },

        //右下蜘蛛图
        getInfo1() {
            var chart = Highcharts.chart("container1", {
                credits: {
                    enabled: false, // 禁用版权信息
                },
                chart: {
                    backgroundColor: "",
                    polar: true,
                    type: "line",
                },
                title: {
                    text: "预算与支出",
                    align: "left",
                    style: {
                        fontSize: 16,
                        color: "#FFF",
                    },
                },
                pane: {
                    size: "80%",
                },
                xAxis: {
                    categories: [
                        "销售",
                        "市场营销",
                        "发展",
                        "客户支持",
                        "信息技术",
                        "行政管理",
                    ],
                    tickmarkPlacement: "on",
                    lineWidth: 0,
                },
                yAxis: {
                    gridLineInterpolation: "polygon",
                    lineWidth: 0,
                    min: 0,
                },
                tooltip: {
                    shared: true,
                    pointFormat:
                        '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>',
                },
                legend: {
                    align: "right",
                    verticalAlign: "top",
                    y: 70,
                    layout: "vertical",
                },
                series: [
                    {
                        name: "预算拨款",
                        data: [43000, 19000, 60000, 35000, 17000, 10000],
                        pointPlacement: "on",
                    },
                    {
                        name: "实际支出",
                        data: [50000, 39000, 42000, 31000, 26000, 14000],
                        pointPlacement: "on",
                    },
                ],
            });
        },
    }
}
</script>
<style scoped lang='scss'>
@import '../../assets/sass/index.scss';

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.main {
    background-color: #e9f0ff;
    width: 100%;
    // height: 100vh;
    // height: calc(100% - 70px);

    .main-left {
        width: 75%;
        height: 100%;
        padding: 10px;

        .message {
            width: 100%;
            height: 20%;
            background-color: #fff;

            >div p:nth-child(1) {
                color: #fff;
                font-size: 17.5px;
                margin: 20px 0 0 32px;
            }

            >div p:nth-child(2) {
                color: #fff;
                font-size: 17.5px;
                margin: 10px 0 0 32px;
            }

            >div:nth-child(1) {
                background: url(../../assets/home/lan.png) no-repeat;
                background-size: 100% 100%;
            }

            >div:nth-child(2) {
                background: url(../../assets/home/cheng.png) no-repeat;
                background-size: 100% 100%;
            }

            >div:nth-child(3) {
                background: url(../../assets/home/lv.png) no-repeat;
                background-size: 100% 100%;
            }

            >div:nth-child(4) {
                background: url(../../assets/home/zi.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        .big-screen {
            // background-color: #000;
            background: url(../../assets/home/bg.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
            // border-top: 10px solid #e9f0ff;
            // width: calc(100% - 15px);
            width: 100%;
            height: 78%;

            .screen-tab {
                width: 100%;
                color: #fff;
                width: 70%;
                padding-top: 10px;
                padding-left: 25px;
                padding-bottom: 20px;

                li {
                    // padding: 20px 50px 10px 50px;
                    flex: 1;


                    span {
                        padding: 0 3px 10px 3px;
                        cursor: pointer;
                    }

                    .tab-line {
                        border-bottom: 3px solid #ff9c00;
                        color: #ff9c00;
                    }
                }
            }

            .bottom {
                width: 100%;
                height: calc(100% - 50px);

                .one {
                    width: 100%;
                    height: 60%;
                }

                .two {
                    flex: 1;
                    width: 100%;
                    margin: 0 auto;
                }
            }

            .bottom>div:nth-child(1) {
                width: 65%;
                height: 100%;
            }

            .bottom>div:nth-child(2) {
                width: 35%;
                height: 100%;
            }
        }
    }

    .main-right {
        width: 24%;
        height: 100%;
    }
}

.warn{
    width: 30px;
    line-height: 30px;
    text-align: center;
    height: 30px;
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: red;
    border-radius: 50%;
    color: #fff;
}
</style>
